<template>
	<view class="container">
		<view class="status-bar"></view>
		<view class="form-group">
			<view class="form-rows">
				<view class="form-row">
					<view class="left">联系人</view>
					<input type="text" placeholder="请输入联系人" placeholder-class="input-placeholder" class="form-row-input"
						v-model="form.contacts_name" />
				</view>
				<view class="form-row">
					<view class="left">联系电话</view>
					<input type="text" placeholder="请输入联系电话" placeholder-class="input-placeholder"
						class="form-row-input" v-model="form.contacts_mobile" />
				</view>
				<view class="form-row">
					<view class="left">店铺名称</view>
					<input type="text" placeholder="请输入店铺名称" placeholder-class="input-placeholder"
						class="form-row-input" v-model="form.store_name" />
				</view>
				<view class="form-row">
					<view class="left">所在地区</view>
					<view class="form-row-flex" @click="chooseLocation">
						<view class="form-row-text" v-if="form.province!='' && form.city!='' && form.district!=''">
							{{form.province+' '+form.city+' '+form.district}}</view>
						<view class="form-row-center" v-else>请选择所在城市</view>
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/sh-dizhi.png"
							mode="widthFix" class="right-icon"></image>
					</view>
				</view>
				<view class="form-row form-row-textarea">
					<view class="left">详细地址</view>
					<view class="u-textarea-wrapper">
						<u-textarea padding="0" border="none" class="form-row-textarea"
							placeholderClass="input-placeholder" v-model="form.store_address"
							placeholder="请输入详细地址"></u-textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="form-group">
			<view class="title">上传身份证信息</view>
			<view class="upload-rows">
				<view class="upload-row" @click="uploadFilePromise('store_person_cert')">
					<image
						:src="form.store_person_cert!=''?form.store_person_cert:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/idcard-front.png'"
						mode="widthFix" class="upload-img"></image>
				</view>
				<view class="upload-row" @click="uploadFilePromise('store_person_cert1')">
					<image
						:src="form.store_person_cert1!=''?form.store_person_cert1:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/idacrd-reverse.png'"
						mode="widthFix" class="upload-img"></image>
				</view>
			</view>
		</view>
		<view class="form-group">
			<view class="title">上传店铺门头照片</view>
			<view class="upload-rows">
				<view class="upload-row" @click="uploadFilePromise('store_logo')">
					<image
						:src="form.store_logo!=''?form.store_logo:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/upload-business.png'"
						mode="widthFix" class="upload-img"></image>
				</view>
			</view>
		</view>
		<view class="form-group">
			<view class="title">上传营业执照</view>
			<view class="upload-rows">
				<view class="upload-row" @click="uploadFilePromise('business_licence_cert')">
					<image
						:src="form.business_licence_cert!=''?form.business_licence_cert:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/upload-business.png'"
						mode="widthFix" class="upload-img"></image>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="fixed-btns">
			<button class="fixed-btn" @click="tijiao" :disabled="btnDisabled">{{edit_text}}</button>
		</view>
	</view>
</template>

<script>
	import md5 from '@/components/MD5.js'
	import {
		baseUrl
	} from '@/config/config.js'
	var validate = require("@/components/validate/validate.js");
	var _this;
	export default {
		data() {
			return {
				store: '',
				edit: 1,
				edit_text: '提交申请',
				form: {
					step: 1,
					contacts_name: '',
					contacts_mobile: '',
					store_name: '',
					province: '',
					city: '',
					district: '',
					store_address: '',
					longitude: '',
					latitude: '',
					store_person_cert: '',
					store_person_cert1: '',
					store_logo: '',
					business_licence_cert: '',
				}
			};
		},
		computed: {
			btnDisabled() {
				if (_this.edit == -100 || _this.edit == -1) {
					return false
				}
				return true
			}
		},
		methods: {
			chooseLocation() {
				if (_this.btnDisabled) {
					return
				}
				uni.chooseLocation({
					success: function(res) {
						_this.form.latitude = res.latitude
						_this.form.longitude = res.longitude
						_this.form.store_address = res.address
						_this.getRegeo(res)
						// uni.$u.toast(JSON.stringify(res))
						// uni.showModal({
						// 	title:'提示',
						// 	content:JSON.stringify(res)
						// })
					},
					fail(fail) {
						// uni.showModal({
						// 	title:'提示',
						// 	content:fail
						// })
						// uni.showModal({
						// 	title:'提示',
						// 	content:JSON.stringify(fail)
						// })
						// uni.$u.toast(JSON.stringify(fail))
					},
					complete: (res) => {
						console.info({
							res
						})
					}
				});
			},
			getRegeo(res) {
				let key = getApp().globalData.gd_web_key
				let location = `${res.longitude},${res.latitude}`
				// var url=`https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${location}`
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					method: 'GET',
					data: {
						key,
						location,
					},
					success(res) {
						let {
							addressComponent
						} = res.data.regeocode
						_this.form.province = addressComponent.province
						_this.form.city = addressComponent.city
						_this.form.district = addressComponent.district
						console.log(res);
						console.log("省份:" + addressComponent.province);
						console.log("城市:" + addressComponent.city);
						console.log("区县:" + addressComponent.district);
						console.log("乡镇/街道:" + addressComponent.township);
					},
					fail(fail) {
						console.log(fail);
					}
				})
			},
			tijiao() {
				_this.form.step = 2
				_this.store_apply()
			},
			async store_apply() {
				if (_this.form.step == 2) {
					var rule = [{
						name: 'contacts_name',
						rules: ['require'],
						errorMsg: {
							require: '请输入联系人',
						}
					}, {
						name: 'contacts_mobile',
						rules: ['require', 'mobile'],
						errorMsg: {
							require: '请输入联系电话',
							mobile: '请输入正确的联系电话',
						}
					}, {
						name: 'store_name',
						rules: ['require'],
						errorMsg: {
							require: '请输入店铺名称',
						}
					}, {
						name: 'district',
						rules: ['require'],
						errorMsg: {
							require: '请选择所在地区',
						}
					}, {
						name: 'store_address',
						rules: ['require'],
						errorMsg: {
							require: '请输入详细地址',
						}
					}, {
						name: 'longitude',
						rules: ['require'],
						errorMsg: {
							require: '请选择经度',
						}
					}, {
						name: 'longitude',
						rules: ['require'],
						errorMsg: {
							require: '请选择经度',
						}
					}, {
						name: 'latitude',
						rules: ['require'],
						errorMsg: {
							require: '请选择纬度',
						}
					}, {
						name: 'store_person_cert',
						rules: ['require'],
						errorMsg: {
							require: '请上传身份证正面',
						}
					}, {
						name: 'store_person_cert1',
						rules: ['require'],
						errorMsg: {
							require: '请上传身份证反面',
						}
					}, {
						name: 'store_logo',
						rules: ['require'],
						errorMsg: {
							require: '请上传店铺门头照片',
						}
					}, {
						name: 'business_licence_cert',
						rules: ['require'],
						errorMsg: {
							require: '请上传营业执照',
						}
					}];
					// 是否全部通过，返回Boolean
					let checked = validate.check(_this.form, rule);
					if (!checked) {
						// 获取错误信息
						let err = validate.getError();
						uni.$u.toast(err[0])
						return;
					}
				}
				const data = await _this.$post('api/store_sq', _this.form)
				if (data.code == 200) {
					_this.$u.toast(data.msg)
					_this.form.step = 1
					_this.store_apply()
				} else if (data.code == 10) {
					_this.edit = data.data.edit
					_this.edit_text = data.data.edit_text
					_this.store = data.data.store
					if (_this.store) {
						_this.form.contacts_name = _this.store.contacts_name
						_this.form.contacts_mobile = _this.store.contacts_mobile
						_this.form.store_name = _this.store.store_name
						_this.form.province = _this.store.province
						_this.form.city = _this.store.city
						_this.form.district = _this.store.district
						_this.form.store_address = _this.store.store_address
						_this.form.longitude = _this.store.longitude
						_this.form.latitude = _this.store.latitude
						_this.form.store_person_cert = _this.store.store_person_cert
						_this.form.store_person_cert1 = _this.store.store_person_cert1
						_this.form.store_logo = _this.store.store_logo
						_this.form.business_licence_cert = _this.store.business_licence_cert
					}
				} else {
					_this.$u.toast(data.msg)
				}
			},
			uploadFilePromise(path) {
				if (_this.btnDisabled) {
					return
				}
				let sign_prefix = getApp().globalData.sign_prefix
				let sign = md5.hax_md5('path' + path + 'user_id' + this.user_id + sign_prefix + this.user_token + sign_prefix).toLocaleLowerCase()
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: baseUrl + '/api/UploadPic', // 仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								token: _this.user_token,
								uniacid: uni.getStorageSync('uniacid')
							},
							formData: {
								user_id: _this.user_id,
								path,
								sign: sign
							},
							success: (result) => {
								let data = JSON.parse(result.data)
								if (data.code == 200) {
									_this.form[path] = data.data.img
								} else {
									uni.$u.toast(data.msg)
								}
							}
						});
					}
				});
			}
		},
		onLoad(e) {
			_this = this;
			_this.store_apply()
		},
		onShow() {

		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/form.scss";

	.container {
		background: #fff;
		position: relative;
		// padding-top: calc(44px + 20rpx);
		height: 100%;
		// background: url('https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/user-bg.png') left top/100% 400rpx no-repeat;
		box-sizing: border-box;
		padding: 0 !important;
	}
</style>